<template>
    <div>
        <el-row align="center">
            <el-col :span="24" style="text-align: center;"><h1>注册</h1></el-col>
            <el-col :span="16" :offset="4">
                <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
                    <el-step title="接受验证码"></el-step>
                    <el-step title="验证验证码"></el-step>
                    <el-step title="填写信息"></el-step>
                    <el-step title="注册成功"></el-step>
                </el-steps>
            </el-col>
        </el-row>
        <el-row style="margin-top: 30px">
            <el-col :span="8" :offset="8">
                <el-form label-position="left">
                    <el-form-item label-width="75px" label="邮箱:" v-show="active < 3">
                        <el-input
                            placeholder="请输入邮箱"
                            v-model="email"
                            maxlength="32"
                            show-word-limit
                            prefix-icon="el-icon-message"
                            autofocus
                            :disabled="emailInputDisable"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item label-width="75px" label="验证码:" v-show="active===1">
                        <el-input
                            placeholder="请输入验证码"
                            v-model="code"
                            prefix-icon="el-icon-key"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <div v-show="active === 2">
                        <el-form-item label-width="75px" label="昵称:">
                            <el-input
                                placeholder="请输入昵称"
                                v-model="nickname"
                                maxlength="8"
                                minlength="2"
                                show-word-limit
                                prefix-icon="el-icon-user"
                                clearable>
                            </el-input>
                        </el-form-item>
                        <el-form-item label-width="75px" label="密码:">
                            <el-input
                                placeholder="请输入密码"
                                v-model="pwd"
                                maxlength="16"
                                minlength="8"
                                show-word-limit
                                prefix-icon="el-icon-unlock"
                                show-password
                                clearable>
                            </el-input>
                        </el-form-item>
                        <el-form-item label-width="75px" label="重复密码:">
                            <el-input
                                placeholder="请再输入一次密码"
                                v-model="pwdAgain"
                                maxlength="16"
                                minlength="8"
                                show-word-limit
                                prefix-icon="el-icon-lock"
                                show-password
                                clearable>
                            </el-input>
                        </el-form-item>
                    </div>
                    <div v-show="active === 3" style="text-align: center">
                        欢迎,
                        <el-button @click="$router.push('/login')">点击登录</el-button>
                    </div>
                    <el-form-item style="text-align: center">
                        <el-button v-show="active === 0" type="primary" @click="getCode" :loading="buttonLoading">
                            获取验证码
                        </el-button>
                        <el-button v-show="active === 1" type="primary" @click="verifyCode" :loading="buttonLoading">
                            验证
                        </el-button>
                        <el-button v-show="active === 2" type="primary" @click="signIn" :loading="buttonLoading"
                                   icon="el-icon-s-promotion">
                            注册
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
            active: 0,
            email: "",
            code: "",
            emailInputDisable: false,
            buttonLoading: false,
            nickname: "",
            pwd: "",
            pwdAgain: ""
        }
    },
    methods: {
        getCode() {
            this.buttonLoading = !this.buttonLoading;
            let reg = /^([a-zA-Z\d][\w-]{2,})@(\w{2,})\.([a-z]{2,})(\.[a-z]{2,})?$/;
            if (!reg.test(this.email)) {
                this.$notify.error({
                    title: '错误',
                    message: '请输入正确的邮箱'
                });
                this.buttonLoading = !this.buttonLoading;
                return;
            }
            this.$axios({
                url: "/api/user/sendCode",
                method: "post",
                params: {
                    email: this.email
                }
            }).then((res) => {
                if (res.data.result) {
                    if (res.data.serviceCode >= 0) {
                        this.active++;
                        this.$notify({
                            type: "success",
                            title: '成功',
                            message: '验证码已发送至' + this.email
                        });
                        this.emailInputDisable = !this.emailInputDisable;
                    } else {
                        this.warn(res.data.errorMessage, res.data.errorDetail);
                    }
                }
                this.buttonLoading = !this.buttonLoading;
            })
        },
        verifyCode() {
            this.buttonLoading = !this.buttonLoading;
            this.$axios({
                url: "/api/user/verification",
                method: "post",
                params: {
                    email: this.email,
                    code: this.code
                }
            }).then((res) => {
                if (res.data.success) {
                    if (res.data.code < 0) {
                        this.$notify.error({
                            title: "验证码错误",
                            message: "请输入正确的验证码"
                        })
                    } else {
                        this.active++;
                    }
                } else {
                    this.$notify.error({
                        title: "内部服务错误",
                        message: res.data.errorMessage
                    })
                }
                this.buttonLoading = !this.buttonLoading;
            })
        },
        signIn() {
            let nickname = this.nickname;
            let pwd = this.pwd
            let pwdAgain = this.pwdAgain;
            if (nickname.length < 2 || nickname.length > 8) {
                this.warn("名称需要大于2个字小于8个字");
                return;
            }
            if (pwd.length < 8 || pwd.length > 16) {
                this.warn("密码的长度需要大于8小于16");
                return;
            }
            if (pwd !== pwdAgain) {
                this.warn("两次的密码不一致");
                return;
            }
            this.buttonLoading = !this.buttonLoading;
            this.$axios({
                url: "/api/user/register",
                method: "post",
                data: {
                    email: this.email,
                    nickname: this.nickname,
                    password: this.pwd
                }
            }).then((res) => {
                if (res.data.result) {
                    this.active++;
                } else {
                    this.warn("服务器错误", "请稍后再试");
                }
            })
        },
        warn(title = "非法输入", message) {
            this.$notify.error({
                title: title,
                message: message
            })
        },
    },
}
</script>
<style>

</style>